<template>
  <div class="head">
    <div class="po">
    <div class="search" @click="fun">
      <div class="center">
        <div class="jk">
        <div class="huo"></div>
        <p>大家都在搜宠物感冒怎么办</p>
      </div>
        <div class="sou"></div>
      </div>
    </div>
    <div class="serimg">
      <img src="@/imgytt/jia.png" alt="" />
    </div>
  </div>
</div>

</template>

<script>
export default {
  name: "shequ-i",
};
</script>
<script setup>
import router from '@/router';
function fun(){
  router.push({
    path:'/child'
  })
}
</script>

<style lang="less" scoped>
.jk{
  position: absolute;
  top: 0;
}
.head{
  width: 25.9375rem;
  height: 5rem;
  margin: 0 auto;
  background-color: #ffffff;
  .po{
    padding: 1.125rem;
  }
}
.search {
  box-sizing: boder-box;
  position: relative;
  display: inline-block;
  width: 17.5625rem;
  height: 2.6875rem;
  padding: 0 1.0625rem;
  border-radius: 1.375rem;
  background-color: #ffffff;
  border: .0625rem solid #ff3e74;
  cursor: pointer;
  .center {
    position: absolute;
    width: 89%;
    line-height: 2.6875rem;
  }
  .huo {
    position: relative;
    top: .1875rem;
    display: inline-block;
    width: 1.0625rem;
    height: 1.0625rem;
    margin-right: .4375rem;
    line-height: 2.6875rem;
    border-radius: .5625rem;
    background: url(../../imgytt/huo.png) no-repeat;
    background-size: cover;
  }
  p {
    line-height: 2.6875rem;
    display: inline-block;
    font-size: .875rem;
    color: #000000;
    font-weight: bold;
    font-family: "Ping Fang  SC  Bold";
  }
  .sou {
    float: right;
    width: 1.875rem;
    height: 1.875rem;
    background: url(../../imgytt/sousuo.png) no-repeat;
    background-size: cover;
    margin-top: .4375rem;

  }
}
.serimg {
float: right;
  height: 2.5rem;
  margin-top: .25rem;
}
</style>